<template>
    <div>
        <page-nav />
        <home-head />
        <div class='container'>
            <div class='row'>
                <dir class='col-lg-8 col-md-10 mx-auto'>
                    <home-post-list v-for='n in posts.data' :key='n.id' :post='n'/>
                    <home-pagination :posts='posts'/>
                </dir>
            </div>
        </div>
    </div>
</template>

<script>
import PageNav from './PageNav.vue'
import HomeHead from './HomeHead.vue'
import HomePostList from './HomePostList'
import HomePagination from './HomePagination'
import $ from 'jquery'

export default {
    name: 'Home',
    components: {
        HomeHead,
        HomePostList,
        HomePagination,
        PageNav
    },
    data:()=>({
        posts:[]
    }),
    beforeMount:function(){
        const page = location.search;
        var res = [];
        if (page) {
            const exp = /(?:page\=(\d+))&?/
            res = exp.exec(page)
        }
        this.getPage(res[1]);
    },
    methods:{
        getPage(value = 1){
            $.get('/debug?page='+value,(data) => {
                this.posts = data.posts
                window.scrollTo(0,0);
            })
        }
    },
    provide(){
        return {
            getPage: this.getPage
        }
    }
}
</script>